<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user,idx) in users" :key="idx">
            {{ idx }},{{ user.name }},{{ user.age }},{{ user.gender }}
        </li>
    </ul>
</div>
<script type="text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            users: []
        },
        created() {
            //初始化加载数据
            //方式一:
            /*axios({
                url: "data.json",
                method: "get"
            }).then(res => {
                console.log(res);
                //将数据赋值到vue实例中的数据属性users
                //不能使用this,在axios回调函数中表示窗口,不是vue实例
                app.users = res.data;
            }).catch(err => alert(err));*/

            //方式二:
            //get请求
            /*axios.get("data.json").then(res => {
                console.log(res);
                app.users = res.data;
            }).catch(err => alert(err));*/

            //post请求
            axios.post("data.json").then(res => {
                console.log(res.data);
                app.users = res.data;
            }).catch(err => alert(err));

            //注意:如果是请求其他服务器地址,则会出现跨域问题,需要
            //在控制器的请求方法上添加注解@CrossOrigin(origins="*")
        }
    });
</script>
</body>
</html>